<!-- template 就是 页面.wxml 结构部分 -->
<template>
	<!-- vue 的结构必须有一个根标签包裹所有内容 -->
	<view>
		<!-- 1.0 搜索框自定义组件 -->
		<search></search>
		<!-- 2.0 tab 栏 -->
		<view class="tabs">
			<view class="tabs_title">
				<block v-for="(item,index) in tabsData" :key="item.id">
					<view @tap="changeTabsIndex(index)" class="tabs_title_item" :class="activeIndex === index ? 'active' : ''">
						{{item.text}}
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<!-- script 就是 页面.js 脚本部分 -->
<script>
	// 2. 导入组件
	import search from '@/components/search/index.vue';
	
	export default {
		// 3. 注册组件
		components:{
			search
		},
		// 页面数据，也是 vue 的写法
		data() {
			return {
				// tab栏默认选中索引值
				activeIndex: 0,
				// 页面数据
				tabsData:[
					{
						id: 1,
						text: '综合'
					},
					{
						id: 2,
						text: '销量'
					},
					{
						id: 3,
						text: '价格'
					}
				]
			}
		},
		// 生命周期函数用小程序的
		onLoad() {
			
		},
		// 事件处理函数，在 vue 文件中，就要写到 methods 中
		methods: {
			changeTabsIndex(index){
				// Vue 直接赋值就可以更新页面数据
				this.activeIndex = index;
			}
		}
	}
</script>

<!-- style 就是 页面.wxss 样式部分 -->
<!-- 之前 Vue 之所以能支持 lang="less"，其实需要 webpack 安装 less-loader -->
<!-- HBuilder 工具通过可视化安装即可：工具 - 插件安装 - 找到 less - 点击安装即可 -->
<style lang="less">
	.tabs{
		&_title{
			display: flex;
			height: 80rpx;
			&_item{
				flex:1;
				display: flex;
				align-items: center;
				justify-content: center;
				&.active{
					font-weight: bold;
					border-bottom: 5rpx solid var(--primaryColor);
				}
			}
		}
	}
</style>
